<script>
export default {
  name: "cardCarouseActivityl",
  props: {
    // 是否显示面板指示点
    indicatorDots: {
      type: Boolean,
      default: true,
    },
    // 指示器颜色
    indicatorColor: {
      type: String,
      default: "#aaaaaa",
    },
    // 指示器选择颜色
    indicatorActiveColor: {
      type: String,
      default: "#000000",
    },
    // 是否自动切换
    autoplay: {
      type: Boolean,
      default: false,
    },
    // 自动切换时间间隔
    interval: {
      type: Number,
      default: 2000,
    },
    // 滑动动画时长
    duration: {
      typeof: Number,
      default: 500,
    },
    // 右边虚拟边距
    nextMargin: {
      type: Number,
      default: 60,
    },
    // 左边虚拟边距
    previousMargin: {
      type: Number,
      default: 60,
    },
    // 数据列表
    userOutLookList: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      currentIndex: 0, // 当前小标
      containerHeight: 240,

    }
  },
  methods: {
    // 轮播点击
    currentChange(e) {
      this.currentIndex = e.detail.current
    },
    getPath(item) {
      if ('id' in item) {
        if (item.id === '') return
        uni.navigateTo({
          url: `/pagesA/party/party_detail?fid=${item.id}`,
        })
      }
    },
    // 加载第一张图片
    onImageLoad(index, e) {
      // 如果是第一张图片，设置容器高度
      if (index === 0) {
        const query = uni.createSelectorQuery().in(this);
        query.select('.carouselImg').boundingClientRect(rect => {
          // 编译到所有平台通用
          let heightNaturalRatio = e.detail.height / e.detail.width * rect.width;
          this.containerHeight = Math.floor(heightNaturalRatio) + 40
        }).exec();}

    },
  }
}
</script>
<template>
  <view class="cardCarousel">
    <view class="cardBox">
      <!-- 完整的联动结构 -->

      <swiper :autoplay="autoplay" :duration="duration" :indicator-active-color="indicatorActiveColor"
              :indicator-color="indicatorColor" :indicator-dots="indicatorDots"
              :interval="interval" :next-margin=" nextMargin + 'rpx' " :previous-margin="previousMargin+ 'rpx' "
              :style="{ height: containerHeight + 'px' }" circular class="swiper"
              @change="currentChange">
        <swiper-item v-for="(item,index) in userOutLookList" :key="index">
          <view class="carouselImg">
            <image v-if="item.id" :src="item.path_b" class="timeImgId" mode="aspectFit"
                   @load="onImageLoad(index, $event)"
                   @tap="getPath(item)"></image>
            <image v-else :src="item.img" class="timeImg" mode="widthFix" @load="onImageLoad(index, $event)"
                   @tap="getPath(item)"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "cardCarouseActivityl.scss";
</style>